﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <link rel="stylesheet" href="../../Styles/jqx.apireference.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.7.2.min.js"></script>
    <meta name="keywords" content="jQuery, Window JavaScript, jQuery Window, Window, Window Widget, jqxWindow" />
    <meta name="description" content="This page represents the help documentation of the jqxWindow widget." />
    <title>jqxWindow API Reference</title>
    <script type="text/javascript">
        $(document).ready(function () {
            $(".documentation-option-type-click").click(function (event) {
                $(event.target).parents('tr').next().find(".property-content").toggle();
            });
        });
    </script>
</head>
<body>
    <div id="properties">
        <h2 class="documentation-top-header">
            Properties</h2>
        <table class="documentation-table">
            <tr>
                <th>
                    Name
                </th>
                <th>
                    Type
                </th>
                <th>
                    Default
                </th>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='property-name-disabled'>width</span>
                </td>
                <td>
                    <span>Number/String</span>
                </td>
                <td>
                    null
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            Sets the window width.</p>
                        <h4>
                            Code examples</h4>
                        <p>
                            Initialize a jqxWindow with the <code>width</code> property specified.
                        </p>
                        <pre><code>$('#jqxWindow').jqxWindow({width:"200px"});</code></pre>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span1'>height</span>
                </td>
                <td>
                    <span>Number/String</span>
                </td>
                <td>
                    null
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            Sets the window height.</p>
                        <h4>
                            Code examples</h4>
                        <p>
                            Initialize a jqxWindow with the <code>height</code> property specified.
                        </p>
                        <pre><code>$('#jqxWindow').jqxWindow({height:"400px"});</code></pre>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span2'>disabled</span>
                </td>
                <td>
                    <span>Boolean</span>
                </td>
                <td>
                    false
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            Gets or sets whether the window is disabled.</p>
                        <h4>
                            Code examples</h4>
                        <p>
                            Initialize a jqxWindow with the <code>disabled</code> property specified.
                        </p>
                        <pre><code>$('#jqxWindow').jqxWindow({ disabled:true }); </code></pre>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span3'>minHeight</span>
                </td>
                <td>
                    <span>Number/String</span>
                </td>
                <td>
                    50
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            Gets or sets window's minimum height. </p>
                        <h4>
                            Code examples</h4>
                        <p>
                            Initialize a jqxWindow with the <code>minHeight</code> property specified.
                        </p>
                        <pre><code>$('#jqxWindow').jqxWindow({ minHeight: '65px' }); </code></pre>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span4'>maxHeight</span>
                </td>
                <td>
                    <span>Number/String</span>
                </td>
                <td>
                   600
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                          Gets or sets window's maximum height.</p>
                        <h4>
                            Code examples</h4>
                        <p>
                            Initialize a jqxWindow with the <code>maxHeight</code> property specified.
                        </p>
                        <pre><code>$('#jqxWindow').jqxWindow({ maxHeight: 1000 }); </code></pre>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span12'>minWidth</span>
                </td>
                <td>
                    <span>Number/String</span>
                </td>
                <td>
                    50
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            Gets or sets window's minimum width. </p>
                        <h4>
                            Code examples</h4>
                        <p>
                            Initialize a jqxWindow with the <code>minWidth</code> property specified.
                        </p>
                        <pre><code>$('#jqxWindow').jqxWindow({ minWidth: '65px' }); </code></pre>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span33'>maxWidth</span>
                </td>
                <td>
                    <span>Number/String</span>
                </td>
                <td>
                   600
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                          Gets or sets window's maximum width.</p>
                        <h4>
                            Code examples</h4>
                        <p>
                            Initialize a jqxWindow with the <code>maxWidth</code> property specified.
                        </p>
                        <pre><code>$('#jqxWindow').jqxWindow({ maxWidth: 1000 }); </code></pre>
                    </div>
                </td>
            </tr>
             <tr>
                <td class="documentation-option-type-click">
                    <span id='Span5'>showCloseButton</span>
                </td>
                <td>
                    <span>Boolean</span>
                </td>
                <td>
                   true
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                          Gets or sets whether a close button will be visible. </p>
                        <h4>
                            Code examples</h4>
                        <p>
                            Initialize a jqxWindow with the <code>showCloseButton</code> property specified.
                        </p>
                        <pre><code>$('#jqxWindow').jqxWindow({ showCloseButton: true }); </code></pre>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span47'>showCollapseButton</span>
                </td>
                <td>
                    <span>Boolean</span>
                </td>
                <td>
                   false
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                          Gets or sets whether the collapse button will be visible. </p>
                        <h4>
                            Code examples</h4>
                        <p>
                            Initialize a jqxWindow with the <code>showCollapseButton</code> property specified.
                        </p>
                        <pre><code>$('#jqxWindow').jqxWindow({ showCollapseButton: true }); </code></pre>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span6'>disabled</span>
                </td>
                <td>
                    <span>Boolean</span>
                </td>
                <td>
                   false
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                         Enables or disables the window. </p>
                        <h4>
                            Code examples</h4>
                        <p>
                            Initialize a jqxWindow with the <code>disabled</code> property specified.
                        </p>
                        <pre><code>$('#jqxWindow').jqxWindow({ disabled: true }); </code></pre>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span7'>autoOpen</span>
                </td>
                <td>
                    <span>Boolean</span>
                </td>
                <td>
                   true
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                       Sets or gets whether the window will be shown after it's creation.</p>
                        <h4>
                            Code examples</h4>
                        <p>
                            Initialize a jqxWindow with the <code>autoOpen</code> property specified.
                        </p>
                        <pre><code>$('#jqxWindow').jqxWindow({ autoOpen: true }); </code></pre>
                    </div>
                </td>
            </tr>
             <tr>
                <td class="documentation-option-type-click">
                    <span id='Span8'>keyboardCloseKey</span>
                </td>
                <td>
                    <span>Number/string</span>
                </td>
                <td>
                   'esc'
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                       Gets or sets the key which could be used for closing the window when it's on focus. Possible value is every keycode and the 'esc' strig (for the escape key).</p>
                        <h4>
                            Code examples</h4>
                        <p>
                            Initialize a jqxWindow with the <code>keyboardCloseKey</code> property specified.
                        </p>
                        <pre><code>$('#jqxWindow').jqxWindow({ keyboardCloseKey: 13 }); </code></pre>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span9'>title</span>
                </td>
                <td>
                    <span>String</span>
                </td>
                <td>
                   ''
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                        Sets or gets window's title content.</p>
                            <h4>
                            Code examples</h4>
                        <p>
                            Initialize a jqxWindow with the <code>title</code> property specified.
                        </p>
                        <pre><code>$('#jqxWindow').jqxWindow({ title: '42' }); </code></pre>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span34'>content</span>
                </td>
                <td>
                    <span>String</span>
                </td>
                <td>
                   ''
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                        Sets or gets window's content's html content.</p>
                            <h4>
                            Code examples</h4>
                        <p>
                            Initialize a jqxWindow with the <code>content</code> property specified.
                        </p>
                        <pre><code>$('#jqxWindow').jqxWindow({ content: 'foobar' }); </code></pre>
                    </div>
                </td>
            </tr>
             <tr>
                <td class="documentation-option-type-click">
                    <span id='Span10'>draggable</span>
                </td>
                <td>
                    <span>Boolean</span>
                </td>
                <td>
                   true
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                       Gets or sets whether the window is draggable.</p>
                        <h4>
                            Code examples</h4>
                        <p>
                            Initialize a jqxWindow with the <code>draggable</code> property specified.
                        </p>
                        <pre><code>$('#jqxWindow').jqxWindow({ draggable: falde }); </code></pre>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span11'>resizable</span>
                </td>
                <td>
                    <span>Boolean</span>
                </td>
                <td>
                   true
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                       Enables or disables whether the end-user can resize the window.</p>
                        <h4>
                            Code examples</h4>
                        <p>
                            Initialize a jqxWindow with the <code>resizable</code> property specified.
                        </p>
                        <pre><code>$('#jqxWindow').jqxWindow({ resizable: false }); </code></pre>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span35'>animationType</span>
                </td>
                <td>
                    <span>String</span>
                </td>
                <td>
                   fade
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                       Gets or sets window's close and show animation type. Possible values ['none', 'fade', 'slide', 'combined'].</p>
                        <h4>
                            Code examples</h4>
                        <p>
                            Initialize a jqxWindow with the <code>resizable</code> property specified.
                        </p>
                        <pre><code>$('#jqxWindow').jqxWindow({ animationType: 'combined' }); </code></pre>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span36'>closeAnimationDuration</span>
                </td>
                <td>
                    <span>Number</span>
                </td>
                <td>
                   350
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                       Gets or sets window's close animation duration.</p>
                        <h4>
                            Code examples</h4>
                        <p>
                            Initialize a jqxWindow with the <code>closeAnimationDuration</code> property specified.
                        </p>
                        <pre><code>$('#jqxWindow').jqxWindow({ closeAnimationDuration: 200 }); </code></pre>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span38'>showAnimationDuration</span>
                </td>
                <td>
                    <span>Number</span>
                </td>
                <td>
                   350
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                       Gets or sets window's show animation duration.</p>
                        <h4>
                            Code examples</h4>
                        <p>
                            Initialize a jqxWindow with the <code>showAnimationDuration</code> property specified.
                        </p>
                        <pre><code>$('#jqxWindow').jqxWindow({ showAnimationDuration: 200 }); </code></pre>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span39'>isModal</span>
                </td>
                <td>
                    <span>Boolean</span>
                </td>
                <td>
                   false
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                       Sets or gets whether the window is displayed as a modal dialog.
                       If the jqxWindow's mode is set to modal, the window blocks user interaction with the underlying user interface.</p>
                        <h4>
                            Code examples</h4>
                        <p>
                            Initialize a jqxWindow with the <code>isModal</code> property specified.
                        </p>
                        <pre><code>$('#jqxWindow').jqxWindow({ isModal: true }); </code></pre>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span40'>position</span>
                </td>
                <td>
                    <span>Object/String</span>
                </td>
                <td>
                   center
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            Gets or sets window's position. The value could be in the following formats: 'center', 'top, left', '{ x: 300, y: 500 }', '[300, 500]'.
                       </p>
                        <h4>
                            Code examples</h4>
                        <p>
                            Initialize a jqxWindow with the <code>position</code> property specified.
                        </p>
                        <pre><code>$('#jqxWindow').jqxWindow({ position: { x: 300, y: 400 }}); </code></pre>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span41'>closeButtonSize</span>
                </td>
                <td>
                    <span>Number</span>
                </td>
                <td>
                   16
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            Gets or sets window's close button size.
                       </p>
                        <h4>
                            Code examples</h4>
                        <p>
                            Initialize a jqxWindow with the <code>closeButtonSize</code> property specified.
                        </p>
                        <pre><code>$('#jqxWindow').jqxWindow({ closeButtonSize: 32}); </code></pre>
                    </div>
                </td>
            </tr>

            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span42'>closeButtonAction</span>
                </td>
                <td>
                    <span>String</span>
                </td>
                <td>
                   hide
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            This setting specifies what happens when the user clicks the jqxWindow's close button. Possile values ['hide', 'close']. When closeButtonAction is 'close', clicking the close button removes the window from the DOM.
                       </p>
                        <h4>
                            Code examples</h4>
                        <p>
                            Initialize a jqxWindow with the <code>closeButtonAction</code> property specified.
                        </p>
                        <pre><code>$('#jqxWindow').jqxWindow({ closeButtonAction: 'close'}); </code></pre>
                    </div>
                </td>
            </tr>

            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span43'>modalOpacity</span>
                </td>
                <td>
                    <span>Number</span>
                </td>
                <td>
                   0.3
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            Sets or gets the jqxWindow's background displayed over the underlying user interface when the window is in modal dialog mode.
                       </p>
                        <h4>
                            Code examples</h4>
                        <p>
                            Initialize a jqxWindow with the <code>modalOpacity</code> property specified.
                        </p>
                        <pre><code>$('#jqxWindow').jqxWindow({ modalOpacity: 0.9}); </code></pre>
                    </div>
                </td>
            </tr>

            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span44'>dragArea</span>
                </td>
                <td>
                    <span>Object</span>
                </td>
                <td>
                   null
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            dragArea is the screen area which is available for dragging(moving) the jqxWindow. Example value: { left: 300, top: 300, width: 600, height: 600 }. By default, the dragArea is null which means
                            that the users will be able to drag the window in the document's body bounds.
                       </p>
                        <h4>
                            Code examples</h4>
                        <p>
                            Initialize a jqxWindow with the <code>dragArea</code> property specified.
                        </p>
                        <pre><code>$('#jqxWindow').jqxWindow({ dragArea: { left: 300, top: 300, width: 600, height: 600 }}); </code></pre>
                    </div>
                </td>
            </tr>

            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span45'>okButton</span>
                </td>
                <td>
                    <span>Object</span>
                </td>
                <td>
                   null
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                           Sets or gets submit button. When a ok/submit button is specified you can use this button to interact with the user. When any user press the submit button
                           window is going to be closed and the dialog result will be in the following format: { OK: true, Cancel: false, None: false }.
                       </p>
                        <h4>
                            Code examples</h4>
                        <p>
                            Initialize a jqxWindow with the <code>okButton</code> property specified.
                        </p>
                        <pre><code>$('#jqxWindow').jqxWindow({ okButton: $('#okButton')}); </code></pre>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span46'>cancelButton</span>
                </td>
                <td>
                    <span>Object</span>
                </td>
                <td>
                   null
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                           Sets or gets cancel button. When a cancel button is specified you can use this button to interact with the user. When any user press the cacel button
                           window is going to be closed and the dialog result will be in the following format: { OK: false, Cancel: true, None: false }.
                       </p>
                        <h4>
                            Code examples</h4>
                        <p>
                            Initialize a jqxWindow with the <code>cancelButton</code> property specified.
                        </p>
                        <pre><code>$('#jqxWindow').jqxWindow({ cancelButton: $('#okButton')}); </code></pre>
                    </div>
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <h2 class="documentation-top-header">
                        Events</h2>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span27'>created</span>
                </td>
                <td>
                    <span>Event</span>
                </td>
                <td>
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            Created is triggered when the user create new window.
                        </p>
                        <h4>
                            Code examples</h4>
                        <p>
                            Bind to the created event by type: jqxWindow.
                        </p>
                        <pre><code>$('#jqxWindow').bind('created', function (event) { // Some code here. }); </code></pre>
                    </div>
                </td>
            </tr>
             <tr>
                <td class="documentation-option-type-click">
                    <span id='Span13'>closed</span>
                </td>
                <td>
                    <span>Event</span>
                </td>
                <td>
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            Closed is triggered when the user close/hide any window.
                        </p>
                        <h4>
                            Code examples</h4>
                        <p>
                            Bind to the closed event by type: jqxWindow.
                        </p>
                        <pre><code>$('#jqxWindow').bind('closed', function (event) { // Some code here. }); </code></pre>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span14'>moving</span>
                </td>
                <td>
                    <span>Event</span>
                </td>
                <td>
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                           Moving is triggered when the window is dragging by the user.
                        </p>
                        <h4>
                            Code examples</h4>
                        <p>
                            Bind to the moving event by type: jqxWindow.
                        </p>
                        <pre><code>$('#jqxWindow').bind('moving', function (event) { // Some code here. }); </code></pre>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span15'>moved</span>
                </td>
                <td>
                    <span>Event</span>
                </td>
                <td>
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                         The moved event is triggered when the window is droped by the user (it's dragging have finished).  
                        </p>
                        <h4>
                            Code examples</h4>
                        <p>
                            Bind to the moved event by type: jqxWindow.
                        </p>
                        <pre><code>$('#jqxWindow').bind('moved', function (event) { // Some code here. }); </code></pre>
                    </div>
                </td>
            </tr>
             <tr>
                <td class="documentation-option-type-click">
                    <span id='Span32'>open</span>
                </td>
                <td>
                    <span>Event</span>
                </td>
                <td>
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                          The 'open' event is triggered when the window is displayed.
                        </p>
                        <h4>
                            Code examples</h4>
                        <p>
                            Bind to the open event by type: jqxWindow.
                        </p>
                        <pre><code>$('#jqxWindow').bind('open', function (event) { // Some code here. }); </code></pre>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span16'>close</span>
                </td>
                <td>
                    <span>Event</span>
                </td>
                <td>
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                          The 'close' event is triggered when the window is closed.
                        </p>
                        <h4>
                            Code examples</h4>
                        <p>
                            Bind to the close event by type: jqxWindow.
                        </p>
                        <pre><code>$('#jqxWindow').bind('close', function (event) { // Some code here. }); </code></pre>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span49'>expand</span>
                </td>
                <td>
                    <span>Event</span>
                </td>
                <td>
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                          The 'expand' event is triggered when the window is expanded.
                        </p>
                        <h4>
                            Code examples</h4>
                        <p>
                            Bind to the expand event by type: jqxWindow.
                        </p>
                        <pre><code>$('#jqxWindow').bind('expand', function (event) { // Some code here. }); </code></pre>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span48'>collapse</span>
                </td>
                <td>
                    <span>Event</span>
                </td>
                <td>
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                          The 'collapse' event is triggered when the window is collapsed.
                        </p>
                        <h4>
                            Code examples</h4>
                        <p>
                            Bind to the collapse event by type: jqxWindow.
                        </p>
                        <pre><code>$('#jqxWindow').bind('collapse', function (event) { // Some code here. }); </code></pre>
                    </div>
                </td>
            </tr>
                 <tr>
                <td class="documentation-option-type-click">
                    <span id='Span17'>resizing</span>
                </td>
                <td>
                    <span>Event</span>
                </td>
                <td>
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                          This event is triggered when the end-user is resizing the window.
                        </p>
                        <h4>
                            Code examples</h4>
                        <p>
                            Bind to the resizing event by type: jqxWindow.
                        </p>
                        <pre><code>$('#jqxWindow').bind('resizing', function (event) { // Some code here. }); </code></pre>
                    </div>
                </td>
            </tr>
             <tr>
                <td class="documentation-option-type-click">
                    <span id='Span18'>resized</span>
                </td>
                <td>
                    <span>Event</span>
                </td>
                <td>
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                          This event is triggered when the end-user has resized the window.
                        </p>
                        <h4>
                            Code examples</h4>
                        <p>
                            Bind to the resized event by type: jqxWindow.
                        </p>
                        <pre><code>$('#jqxWindow').bind('resized', function (event) { // Some code here. }); </code></pre>
                    </div>
                </td>
            </tr>
             <tr>
                <td colspan='3' style='width: 100%'>
                    <h2 class="documentation-top-header">
                        Methods</h2>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span37'>closeAll</span>
                </td>
                <td>
                    <span>Method</span>
                </td>
                <td>
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                           Closing all open windows which are not modal.</p>
                        <h4>
                            Code example</h4>
                        <p>
                            Invoke the closeAll method.
                        </p>
                        <pre><code>$('#jqxWindow').jqxWindow('closeAll');
                        </code></pre>
                    </div>
                </td>
            </tr>

            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span19'>setTitle</span>
                </td>
                <td>
                    <span>Method</span>
                </td>
                <td>
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p> Setting window's title</p>
                        <h4>
                            Code example</h4>
                        <p>
                            Invoke the setTitle method.
                        </p>
                        <pre><code>$('#jqxWindow').jqxWindow('setTitle', '<strong>Sample title</strong>');
                        </code></pre>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span20'>setContent</span>
                </td>
                <td>
                    <span>Method</span>
                </td>
                <td>
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>Setting window's content.</p>
                        <h4>
                            Code example</h4>
                        <p>
                            Invoke the setContent method.
                        </p>
                        <pre><code>$('#jqxWindow').jqxWindow('setContent', '<p>Sample content</p>');
                        </code></pre>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span21'>disable</span>
                </td>
                <td>
                    <span>Method</span>
                </td>
                <td>
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>Disabling the window.</p>
                        <h4>
                            Code example</h4>
                        <p>
                            Invoke the disable method.
                        </p>
                        <pre><code>$('#jqxWindow').jqxWindow('disable');
                        </code></pre>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span22'>enable</span>
                </td>
                <td>
                    <span>Method</span>
                </td>
                <td>
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>Enabling the window</p>
                        <h4>
                            Code example</h4>
                        <p>
                            Invoke the enable method.
                        </p>
                        <pre><code>$('#jqxWindow').jqxWindow('enable');
                        </code></pre>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span23'>isOpen</span>
                </td>
                <td>
                    <span>Method</span>
                </td>
                <td>
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>Returns true when jqxWindow is opened and false  when the jqxWindow is closed</p>
                        <h4>
                            Code example</h4>
                        <p>
                            Invoke the isOpen method.
                        </p>
                        <pre><code>$('#jqxWindow').jqxWindow('isOpen');
                        </code></pre>
                    </div>
                </td>
            </tr>
             <tr>
                <td class="documentation-option-type-click">
                    <span id='Span24'>closeWindow</span>
                </td>
                <td>
                    <span>Method</span>
                </td>
                <td>
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>Closing the window.</p>
                        <h4>
                            Code example</h4>
                        <p>
                            Invoke the closeWindow method.
                        </p>
                        <pre><code>$('#jqxWindow').jqxWindow('closeWindow', element);
                        </code></pre>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span25'>bringToFront</span>
                </td>
                <td>
                    <span>Method</span>
                </td>
                <td>
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>Bringing the window to the front.</p>
                        <h4>
                            Code example</h4>
                        <p>
                            Invoke the bringToFront method.
                        </p>
                        <pre><code>$('#jqxWindow').jqxWindow('bringToFront');
                        </code></pre>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span26'>close</span>
                </td>
                <td>
                    <span>Method</span>
                </td>
                <td>
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>Hiding/closing the current window (the action - hide or close depends on the closeButtonAction).</p>
                        <h4>
                            Code example</h4>
                        <p>
                            Invoke the hide method.
                        </p>
                        <pre><code>$('#jqxWindow').jqxWindow('close');
                        </code></pre>
                    </div>
                </td>
            </tr>
             <tr>
                <td class="documentation-option-type-click">
                    <span id='Span28'>open</span>
                </td>
                <td>
                    <span>Method</span>
                </td>
                <td>
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>Opening/showing the current window.</p>
                        <h4>
                            Code example</h4>
                        <p>
                            Invoke the open method.
                        </p>
                        <pre><code>$('#jqxWindow').jqxWindow('open');
                        </code></pre>
                    </div>
                </td>
            </tr>
           <tr>
                <td class="documentation-option-type-click">
                    <span id='Span30'>expand</span>
                </td>
                <td>
                    <span>Method</span>
                </td>
                <td>
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>Expand the current window.</p>
                        <h4>
                            Code example</h4>
                        <p>
                            Invoke the expand method.
                        </p>
                        <pre><code>$('#jqxWindow').jqxWindow('expand');
                        </code></pre>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span31'>collapse</span>
                </td>
                <td>
                    <span>Method</span>
                </td>
                <td>
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>Collapse the current window.</p>
                        <h4>
                            Code example</h4>
                        <p>
                            Invoke the collapse method.
                        </p>
                        <pre><code>$('#jqxWindow').jqxWindow('collapse');
                        </code></pre>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span29'>move</span>
                </td>
                <td>
                    <span>Method</span>
                </td>
                <td>
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>Moving the current window.</p>
                        <h4>
                            Code example</h4>
                        <p>
                            Invoke the move method.
                        </p>
                        <pre><code>$('#jqxWindow').jqxWindow('move', 300, 6000);</code></pre>
                    </div>
                </td>
            </tr>
        </table>
        <br />
    </div>
</body>
</html>
